<template>
    <div class="Tomakeanappointmentcourse">
        <div class="Tomakeanappointmentcourse-head">
            订阅课程
        </div>
        <div class="Createcourse-content">
            <label class="Createcourse-data">
                <span><i>*</i> 语言</span>
                <el-select v-model="languageEn" @change="chooselanguage">
                    <el-option 
                    v-for="item in languageEns" 
                    :key="item.value" 
                    :label="item.key" 
                    :value="item.key"
                   ></el-option>
                </el-select>
            </label>
            <label class="Createcourse-data">
                <span><i>*</i> 日期</span>
                <el-date-picker v-model="dateof" type="date" placeholder="选择日期" @change="changeDate" :picker-options="pickerOptions"></el-date-picker>
            </label>
            <!-- <label class="Createcourse-Periodtime">
                <div @click="getallClassList" :class="isall?'seled':''" style="background: #ddd;text-align: center;border-radius: 20px;margin-left: 144px;width: 126px;height: 30px;line-height: 30px;">全部</div>
            </label> -->
            <label class="Createcourse-Periodtime">
                <span><i>*</i> 时间段</span>
                <ul v-for="(item,index) in Periodtime" :key="index" class="Periodtime-List">
                    <span>{{item.Periodtimes}}</span>
                    <!-- <li v-for="(items,e) in item.tiemrs" :key="e" @click="chosePeriodtime(index,e,item.tiemrs)" :class="chosePeriodtimeindex == index+'.'+e?'seled':''">{{items}}</li> -->
                    <li v-for="(items,e) in item.tiemrs" :key="e" @click="chosePeriodtime(index,e,item.tiemrs)" :class="{'seled':chosePeriodtimeindex == index+'.'+e}" :style="panduanwai>index?'background: #555;color: #fff;cursor: no-drop;':panduanwai<index?'':panduannei>=e?'background: #555;color: #fff;cursor: no-drop;':''">{{items}}</li>
                </ul>
            </label>
            <label class="Coursesarecurrently">
                <span>当前可订阅课程</span>
                <ul>
                    <li v-for="(item,index) in CoursesList" :key="index" @click="Choosecourse(item,index)">
                        <label>
                            <img :src="item.cover" alt="">
                        </label>
                        <label class="Coursesarecurrently-label">
                            <label>
                                <span>{{item.title}}</span>
                            </label>
                            <label>
                                <img src="/images/视频直播icon@2x.png" alt="" v-if="item.classroom_type == 'online_video'">
                                <img src="/images/语音直播@2x.png" alt="" v-else>
                            </label>
                            <label>
                                <span>{{item.language_levels}}</span>
                                <span>{{item.languageEn}}</span>
                            </label>
                            <label>
                                <span>{{starttimes}}-{{endtimes}}</span>
                                <img src="/images/矩形 39@2x.png" alt="" :class="Isseldes == index?'seldes':'seldesfalse'"/>
                            </label>
                        </label>
                    </li>
                </ul>
                
            </label>
            <div class="Lvie-cl-de-con-pagination">
                <el-pagination @current-change="handleCurrentChange" background layout="prev, pager, next" :total="100"></el-pagination>
            </div>
            <label class="Createcourse-button">
                <span @click="cancle">取消</span>
                <span @click="confirms">确认订阅</span>
            </label>
        </div>
    </div>
</template>
<script>
export default {
    name:'Tomakeanappointmentcourse',
    data(){
        return{
            pickerOptions: {
                // selectableRange: ['00:00:00 - 02:00:00'],  禁用得时间段
                disabledDate(time) {
                    return time.getTime() < Date.now() - 8.64e7
                }
            },
            Periodtime:[
                {
                    Periodtimes:'凌晨',
                    tiemrs:['00:00-00:30','00:30-01:00','01:00-01:30','01:30-02:00','02:00-02:30','02:30-03:00','03:00-03:30','03:30-04:00','04:00-04:30','04:30-05:00','05:00-05:30','05:30-06:00']
                    
                },
                {
                    Periodtimes:'早上',
                    tiemrs:['06:00-06:30','06:30-07:00','07:00-07:30','07:30-08:00']
                    
                },
                {
                    Periodtimes:'上午',
                    tiemrs:['08:00-08:30','08:30-09:00','09:00-09:30','09:30-10:00','10:00-10:30','10:30-11:00','11:00-11:30','11:30-12:00']
                    
                },
                {
                    Periodtimes:'中午',
                    tiemrs:['12:00-12:30','12:30-13:00','13:00-13:30','13:30-14:00']
                    
                },
                {
                    Periodtimes:'下午',
                    tiemrs:['14:00-14:30','14:30-15:00','15:00-15:30','15:30-16:00','16:00-16:30','16:30-17:00','17:00-17:30','17:30-18:00']
                    
                },
                {
                    Periodtimes:'晚上',
                    tiemrs:['18:00-18:30','18:30-19:00','19:00-19:30','19:30-20:00','20:00-20:30','20:30-21:00','21:00-21:30','21:30-22:00','22:00-22:30','22:30-23:00','23:00-23:30','23:30-23:59']
                    
                }
            ],
            Thetheme:[
                {
                    value:'Scene',
                    label:'场景',
                    children:[
                        {
                            value:'Restaurant',
                            label:'餐馆'
                        },
                        {
                            value:'Post Office',
                            label:'邮局'
                        },
                        {
                            value:'Hospital and health scene',
                            label:'医院及健康场景'
                        },
                        {
                            value:'Hotel',
                            label:'酒店'
                        },
                        {
                            value:'Shopping mall',
                            label:'商场购物'
                        },
                        {
                            value:'Work and work scenes',
                            label:'工作和上班场景'
                        },
                        {
                            value:'Airport',
                            label:'机场'
                        },
                        {
                            value:'Farm',
                            label:'农场'
                        },
                        {
                            value:'Campus',
                            label:'校园'
                        },
                        {
                            value:'Travel',
                            label:'旅行'
                        },
                        {
                            value:'Supermarket',
                            label:'超市'
                        },
                        {
                            value:'Drive',
                            label:'驾驶'
                        },
                        {
                            value:'Wedding',
                            label:'婚礼'
                        },
                        {
                            value:'Cinema',
                            label:'电影院'
                        },
                        {
                            value:'Entertainment place',
                            label:'娱乐场所'
                        },
                        {
                            value:'Gymnasium',
                            label:'体育馆'
                        },
                        {
                            value:'Museum',
                            label:'博物馆'
                        },
                        {
                            value:'Bar or KTV',
                            label:'酒吧或KTV'
                        },
                    ]
                },
                {
                    value:'Topic',
                    label:'主题',
                    children:[
                        {
                            value:'Self introduction',
                            label:'自我介绍'
                        },
                        {
                            value:'Learning and education',
                            label:'学习教育'
                        },
                        {
                            value:'Talk about music',
                            label:'聊聊音乐'
                        },
                        {
                            value:'Talk about family',
                            label:'聊聊家人'
                        },
                        {
                            value:'Talk about dressing',
                            label:'聊聊穿着'
                        },
                        {
                            value:'Talk about friends',
                            label:'聊聊朋友'
                        },
                        {
                            value:'Talk about delicious food',
                            label:'聊聊美食'
                        },
                        {
                            value:'Festivals and customs',
                            label:'节日和习俗'
                        },
                        {
                            value:'Talk about variety show',
                            label:'聊聊综艺节目'
                        },
                        {
                            value:'Talk about the near future plan',
                            label:'聊聊近期计划'
                        },
                        {
                            value:'Talking about hobbies',
                            label:'聊聊爱好'
                        },
                        {
                            value:'Talk about learning',
                            label:'聊聊学习'
                        },
                        {
                            value:'Talk about TV series',
                            label:'聊聊电视剧'
                        },
                        {
                            value:'Talk about movies',
                            label:'聊聊电影'
                        },
                        {
                            value:'Talk about work',
                            label:'聊聊工作'
                        },
                        {
                            value:'How to learn the language well',
                            label:'怎么学好这个语言'
                        },
                        {
                            value:'About tourism',
                            label:'关于旅游'
                        },
                        {
                            value:'Talk about geography',
                            label:'聊聊地理'
                        },
                        {
                            value:'Talking about ideals',
                            label:'谈谈理想'
                        },
                        {
                            value:'Talk about love',
                            label:'聊聊爱情'
                        },
                        {
                            value:'Talk about the weather',
                            label:'聊聊天气'
                        },
                        {
                            value:'Talk about some interesting things',
                            label:'聊一些趣事'
                        },
                    ]
                }
            ],
            Thethemevalue:'',
            dateof:new Date,
            chosePeriodtimeindex:'',
            total:50,
            CoursesList:[],
            starttime:'',
            endtime:'',
            starttimes:'',
            endtimes:'',
            appointmentid:'',
            masterid:'',
            unserinfo:JSON.parse(localStorage.getItem('userinfo')),
            Isseldes:'',
            abc:[
                {"Estonian":"爱沙尼亚语"},
				{"Arabic":"阿拉伯语"},
				{"Bulgarian":"保加利亚语"},
				{"polish":"波兰语"},
				{"Danish":"丹麦语"},
				{"German":"德语"},
				{"Russian":"俄语"},
				{"Traditional Chinese":"繁体中文"},
				{"French":"法语"},
				{"Finnish":"芬兰语"},
				{"Korean":"韩语"},
				{"Dutch":"荷兰语"},
				{"Czech":"捷克语"},
				{"romanian":"罗马尼亚语"},
				{"Portuguese":"葡萄牙语"},
				{"Japanese":"日语"},
				{"Swedish":"瑞典语"},
				{"slovenian":"斯洛文尼亚语"},
				{"Thai":"泰语"},
				{"Spanish":"西班牙语"},
				{"Greek":"希腊语"},
				{"hun":"匈牙利语"},
				{"Italian":"意大利语"},
				{"English":"英语"},
				{"Vietnamese":"越南语"},
				{"cantonese":"粤语"},
				{"Chinese":"中文"}
            ],
            languageEn:[
                {"Estonian":"爱沙尼亚语"},
				{"Arabic":"阿拉伯语"},
				{"Bulgarian":"保加利亚语"},
				{"polish":"波兰语"},
				{"Danish":"丹麦语"},
				{"German":"德语"},
				{"Russian":"俄语"},
				{"Traditional Chinese":"繁体中文"},
				{"French":"法语"},
				{"Finnish":"芬兰语"},
				{"Korean":"韩语"},
				{"Dutch":"荷兰语"},
				{"Czech":"捷克语"},
				{"romanian":"罗马尼亚语"},
				{"Portuguese":"葡萄牙语"},
				{"Japanese":"日语"},
				{"Swedish":"瑞典语"},
				{"slovenian":"斯洛文尼亚语"},
				{"Thai":"泰语"},
				{"Spanish":"西班牙语"},
				{"Greek":"希腊语"},
				{"hun":"匈牙利语"},
				{"Italian":"意大利语"},
				{"English":"英语"},
				{"Vietnamese":"越南语"},
				{"cantonese":"粤语"},
				{"Chinese":"中文"}
            ],
            languageEns:[
                {value:"Estonian",key:"爱沙尼亚语"},
				{value:"Arabic",key:"阿拉伯语"},
				{value:"Bulgarian",key:"保加利亚语"},
				{value:"polish",key:"波兰语"},
				{value:"Danish",key:"丹麦语"},
				{value:"German",key:"德语"},
				{value:"Russian",key:"俄语"},
				{value:"Traditional Chinese",key:"繁体中文"},
				{value:"French",key:"法语"},
				{value:"Finnish",key:"芬兰语"},
				{value:"Korean",key:"韩语"},
				{value:"Dutch",key:"荷兰语"},
				{value:"Czech",key:"捷克语"},
				{value:"romanian",key:"罗马尼亚语"},
				{value:"Portuguese",key:"葡萄牙语"},
				{value:"Japanese",key:"日语"},
				{value:"Swedish",key:"瑞典语"},
				{value:"slovenian",key:"斯洛文尼亚语"},
				{value:"Thai",key:"泰语"},
				{value:"Spanish",key:"西班牙语"},
				{value:"Greek",key:"希腊语"},
				{value:"hun",key:"匈牙利语"},
				{value:"Italian",key:"意大利语"},
				{value:"English",key:"英语"},
				{value:"Vietnamese",key:"越南语"},
				{value:"cantonese",key:"粤语"},
				{value:"Chinese",key:"中文"}
            ],
            currentPage:0,
            isall:false,
            panduanwai:-1,
            panduannei:-1,
            panduan:false,
        }
    },
    created(){
        this.shouldCSS()
    },
    methods:{
        cancle(){
            this.$router.go(-1);
        },
        chooselanguage(){
            this.languageEns.map(item=>{
                if(item.key == this.languageEn){
                    this.yuyan = item.value
                }
            })
            console.log(this.yuyan)
            this.getallClassList()
        },
        getallClassList(){
            let _this = this
            _this.isall = true
            _this.chosePeriodtimeindex = -1
            var reg = /^(\d{4})-(\d{2})-(\d{2})$/;
            if(!reg.test(this.dateof)){
                this.dateFormat(this.dateof)
            }
            var data ={
                end_time:this.dateof + ' 23:59:59',
                start_time:this.dateof + ' 00:00:00',
                offset:'+8',
                type :'single_class',
                pageSize:3,
                currentPage:1,
                languag:this.yuyan,
            }
            console.log(this.data)
            this.$axios({
                method:'get',
                url:'http://101.37.66.151:8768/eg-api/user/masterAppointment/queryAppointmentListPage',
                params:data,
            }).then((res) =>{
                console.log(res.data.data,'可以的课程')
                this.CoursesList =res.data.data
            }).catch((error) =>{
                console.log(error)
            })

        },
        changeDate(){
            // this.shouldCSS()
            console.log()
            console.log(new Date())
            this.chosePeriodtimeindex = -1
            let nowDate = new Date()
            if(this.dateof>nowDate){
                this.panduanwai = -1
                this.panduannei = -1
            }else{
                if(this.dateof.getFullYear() < nowDate.getFullYear()){
                    this.panduanwai = 5
                    this.panduannei = 11
                }else if(this.dateof.getMonth() < nowDate.getMonth()){
                    this.panduanwai = 5
                    this.panduannei = 11
                }else if(this.dateof.getDate() < nowDate.getDate()){
                    this.panduanwai = 5
                    this.panduannei = 11
                }else{
                    this.shouldCSS()
                }
                console.log(this.dateof == new Date())
            }
        },
        shouldCSS(){
            if(this.dateof.length == undefined){
                var yy = this.dateof.getFullYear()
                var mm = this.dateof.getMonth() + 1
                var dd = this.dateof.getDate()
                var panduanDateS = yy + '-' + mm + '-' + dd + ' '
                var panduanDateE = yy + '-' + mm + '-' + dd + ' '
            }else{
                var panduanDateS = this.dateof + ' '
                var panduanDateE = this.dateof + ' '
            }
            this.Periodtime.some((item,index)=>{
                item.tiemrs.some((itam,indax)=>{
                    panduanDateS = panduanDateS + itam.split('-')[0]
                    panduanDateE = panduanDateE + itam.split('-')[1]
                    this.panduanwai = index
                    this.panduannei = indax
                    this.panduan = this.isDuringDate(panduanDateS,panduanDateE)
                    if(this.panduan){
                        return this.panduan
                    }else{
                        panduanDateS = panduanDateS.substr(0,10)
                        panduanDateE = panduanDateE.substr(0,10)
                    }
                })
                return this.panduan
            })
            if(this.panduanwai == 5 && this.panduannei ==11){
                this.panduanwai = -1
                this.panduannei = -1
            }
            console.log(this.panduanwai,this.panduannei)
        },
        handleCurrentChange(val) {
            this.currentPage = val
            console.log(val)
        },
        isDuringDate(beginDateStr, endDateStr){
            var curDate = new Date(),
                beginDate = new Date(beginDateStr),
                endDate = new Date(endDateStr);
            if (curDate >= beginDate && curDate <= endDate) {
                return true;
            }
            return false;
        },
        chosePeriodtime(e,echild,tiemrs){
            let _this = this
            if(_this.panduanwai > e){
                _this.$message({message:'当前时段不可选',type:'error',duration:500})
            }else if (_this.panduanwai == e && _this.panduannei >= echild){
                _this.$message({message:'当前时段不可选',type:'error',duration:500})
            }else{
                _this.CoursesList = []
                _this.chosePeriodtimeindex =e+'.'+echild
                var reg = /^(\d{4})-(\d{2})-(\d{2})$/;
                if(!reg.test(_this.dateof)){
                    _this.dateFormat(_this.dateof)
                }
                var starttime =  tiemrs[echild].substring(0,5)
                var endtime =  tiemrs[echild].substring(6,11)
                _this.starttimes = starttime
                _this.endtimes = endtime
                _this.starttime = _this.dateof +' '+ endtime+':00'
                _this.endtime = _this.dateof +' '+ starttime+':00'
                var data ={
                    end_time:_this.starttime,
                    start_time:_this.endtime,
                    offset:'+8',
                    type :'open_class',
                }
                console.log(_this.abc)
                _this.$axios({
                    method:'get',
                    url:'http://101.37.66.151:8768/eg-api/user/masterAppointment/queryAppointmentListPage',
                    params:data,
                }).then((res) =>{
                    res.data.data.map(element => {
                        if(element['language_level'] == "Zero basis"){
                            element.language_levels='零基础'
                        }else if(element['language_level'] =="Senior"){
                            element.language_levels='高级'
                        }else if(element['language_level'] =="Intermediate"){
                            element.language_levels='中级'
                        }else if(element['language_level'] =="Primary"){
                            element.language_levels='初级'
                        }
                        
                        _this.abc.map(function(j){
                            if(j[element['language']]){
                                element.languageEn=j[element['language']]
                            }
                                
                        })
                    });
                    _this.CoursesList =res.data.data
                    _this.Choosecourse(this.CoursesList[0],0)
                }).catch((error) =>{
                    console.log(error)
                })
            }
            
        },
        dateFormat:function(time) {

            var date=time;
            var year=date.getFullYear();
            /* 在日期格式中，月份是从0开始的，因此要加0
            * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
            * */
            var month= date.getMonth()+1<10 ? "0"+(date.getMonth()+1) : date.getMonth()+1;
            var day=date.getDate()<10 ? "0"+date.getDate() : date.getDate();
            var hours=date.getHours()<10 ? "0"+date.getHours() : date.getHours();
            var minutes=date.getMinutes()<10 ? "0"+date.getMinutes() : date.getMinutes();
            var seconds=date.getSeconds()<10 ? "0"+date.getSeconds() : date.getSeconds();
            // 拼接
            this.dateof = year+"-"+month+"-"+day;
            return year+"-"+month+"-"+day;
            
        },
        handleChange(value) {
            console.log(value);
        },
        Choosecourse(item,e){
            console.log(item)
            this.Isseldes = e
            this.appointmentid = item.id
        },
        confirms(){
           if(this.appointmentid == ''){
                    alert("请选择课程")
                    console.log(this.appointmentid)
            }else{
                var data ={
                    appointment_id :this.appointmentid,
                    user_id :this.unserinfo.user_id,
                }
                this.$axios({
                    method:'POST',
                    url:'http://101.37.66.151:8768/eg-api/user/userClass/insert',
                    data:data,
                }).then((res) =>{
                    console.log(res.data.data)
                    alert(res.data.message)
                    if(res.data.code == 0){
                        this.$router.go(-1);
                    }
                }).catch((error) =>{
                    console.log(error)
                })
            }
            console.log(data)
        }
    }
}
</script>
<style lang="less" scoped>
    .unChoose{
        background: #555;
        color: #fff;
        cursor: no-drop;
    }
    .Tomakeanappointmentcourse{
        position: relative;
        width: 100%;
        border-radius: 20px;
        background: #ffffff;
    }
    .Tomakeanappointmentcourse-head{
        position: relative;
        width: 86%;
        height: 80px;
        margin: 0 auto;
        border-bottom: 1px solid #2DC7C8;
        display: flex;
        align-items: center;
        padding-left: 4%;
        color: #2DC7C8;
        font-size: 20px;
        font-weight: bold;
    }
    .Createcourse-content{
        position: relative;
        width: 80%;
        margin: 0 auto;
        margin-top: 50px;
    }
    .Createcourse-content>label{
        display: flex;
        width: 100%;
        margin-top: 30px;
        span{
            width: 10%;
            i{
                color: #FF7336;
            }
        }
    }
    .Createcourse-topic,.Createcourse-type,.Createcourse-class,.Createcourse-Languagelevel,.Createcourse-wheat{
        height: 60px;
        align-items: center;
        /deep/.el-select{
            width: 50%;
            border: #CECECE;
        }
    }
    .Createcourse-data{
        height: 60px;
        align-items: center;
        /deep/.el-date-editor{
            width: 50%;
            border: #CECECE;
        }
        
        /deep/.el-select{
            width: 50%;
            border: #CECECE;  
        }
    }
    .Createcourse-Periodtime{
        align-items: center;
        flex-wrap: wrap;
        ul{
            display: flex;
            width: 90%;
            padding: 0;
            flex-wrap: wrap;
            list-style: none;
            margin-left: auto;
            li{
                width: 16%;
                font-size: 12px;
                height: 31px;
                background:rgba(221,221,221,1);
                border-radius:16px;
                margin-top: 10px;
                text-align: center;
                line-height: 31px;
                margin-left: 1%;
                cursor: pointer;
                &:first-child{
                    width: 10%;
                    background: none;
                }
            }
        }
    }
    .Createcourse-Periodtime>span{
        margin-top: -8.5%;
    }
    .seled{
        background: #3ACBCC!important;
    }
    .Periodtime-List>span{
        width: 6%!important;
        height: 31px!important;
        margin-top: 10px;
        line-height: 31px!important;
    }
    .Periodtime-List>li{
        &:nth-child(7){
            margin-left: 7%;
        }
        &:nth-child(12){
            margin-left: 7%;
        }
    }
    .Createcourse-button{
        height: 100px;
        align-items: center;
        padding-bottom: 100px;
        span{
            width: 20%!important;
            height: 41px;
            line-height: 41px;
            text-align: center;
            cursor: pointer;
            &:first-child{
                background:rgba(222,222,222,1);
                border-radius:21px;
                margin-left: 14%;
            }
            &:last-child{
                background:rgba(58,203,204,1);
                border-radius:21px;
                color: #ffffff;
                margin-left: 4%;
            }
        }
    }
    .Coursesarecurrently{
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        span{
            width: 100%!important;
            &:first-child{
                height: 40px;
                line-height: 40px;
                color: #3E3E3E;
                font-size: 16px;
                font-weight: Bold;
            }
            &:last-child{
                display: flex;
                width: 90%!important;
                justify-content: space-between;
            }
        }
    }
    .Coursesarecurrently>ul{
        width: 100%;
        display: flex;
        list-style: none;
        padding: 0;
        justify-content: space-between;
        li{
            width: 30%;
            height: 120px;
            border:2px solid rgba(54,205,206,1);
            border-radius:10px;
            display: flex;
            align-items: center;
            cursor: pointer;
        }
    }
    .Coursesarecurrently>ul>li>label{
        display: flex;
        width: 40%;
        justify-content: center;
        cursor: pointer;
        img{
            width: 90px;
        }
        &:last-child{
            width: 60%!important;
            display: flex;
            flex-wrap: wrap;
            height: 80%;
            span{
                width: 100%;
                height: 26px;
                line-height: 26px;
                font-size: 12px;
            }
        }
    }
    .Coursesarecurrently-label{
        label{
            display: flex;
            width: 100%;
            height: 26px;
            &:first-child{
                overflow: hidden;
                text-overflow:ellipsis;
                white-space: nowrap;
                span{
                    font-size: 16px!important;
                };
            }
            span{
                &:last-child{
                    color: #555555;
                    font-size: 12px;
                }
            }
        }
    }
    .seldes{
        width: 23px!important;
    }
    .Coursesarecurrently>ul:after{
        content: '';
        width: 30%;
        border:1px solid transparent;
    }
    .Lvie-cl-de-con-pagination{
        position: relative;
        width: 100%;
        height: 100px;
        margin-top:80px;
        display: flex;
        justify-content: flex-end;
        margin-right: 100px;
    }
    .seldesfalse{
        display: none;
    }
</style>